// JavaScript Document
//@require Class.js

Fuelandtemp = new MyClass({
	/**
     * Property: fuel
	 * 	 Nivel de combustible
     * {Integer} values: 0 to 200
     */
	fuel: 0,
	/**
     * Property: temperature
	 *	Temperatura (medida en grados centigrados)
     * {Integer} values: 0 to 200
     */
	temperature: 0,
	/**
     * Property: imagesURL
     * {String}
     */
	imagesURL: 'js/tablero/images/',
	/**
     * Property: display
     * {DOMElement}
     */
	display: null,
	/**
     * SIZE of DISPLAY
     */
	width: '120px',
	height: '100px',
	/**
     * Property: agujaFuel
     * {DOMElement: div}
     */
	agujaFuel: null,
	agujaFuelWidth: '1560px',
	/**
     * Property: fuelReserva
     * {DOMElement: div}
     */
	fuelReserva: null,
	/**
     * Property: agujaTemp
     * {DOMElement: div}
     */
	agujaTemp: null,
	agujaTempWidth: '1560px',
	/**
     * Property: maxima
     * {Integer}
     */
	fuelMaxima: 100,
	/**
     * Property: maxima
     * {Integer}
     */
	tempMaxima: 120,
	/**
     * Property: animationFuelTimeOut
     * {Integer}
     */
	animationFuelTimeOut: null,
	/**
     * Property: animationFuelTimeOut
     * {Integer}
     */
	animationTempTimeOut: null,
	/**
     * Property: activeTemp
     * {boolean}
     */
	activeTemp: true,
	/**
     * Property: activeFuel
     * {boolean}
     */
	activeFuel: true,

	init: function(imagesURL){
		if (imagesURL!=null)
			this.imagesURL = imagesURL;
		this.display = document.createElement("div");
		with (this.display.style){
			width = this.width;
			height = this.height;
			background = "transparent url("+this.imagesURL+"fuelandtemp.gif) no-repeat center";
		}

		this.agujaTemp = document.createElement("div");
		with (this.agujaTemp.style){
			width = this.width;
			height = this.height;
			background = "transparent url("+this.imagesURL+"agujaTemperatura.gif) no-repeat";
		}
		this.display.appendChild(this.agujaTemp);

		this.fuelReserva = document.createElement("div");
		with (this.fuelReserva.style){
			width = this.width;
			height = this.height;
		}
		this.agujaTemp.appendChild(this.fuelReserva);

		this.agujaFuel = document.createElement("div");
		with (this.agujaFuel.style){
			width = this.width;
			height = this.height;
			background = "transparent url("+this.imagesURL+"agujaFuel.gif) no-repeat";
		}
		this.fuelReserva.appendChild(this.agujaFuel);
	},

	/**
     * Method: putDisplayIn
     *
     * Parameters:
     * idElement - {String}
     */
	putDisplayIn: function(idElement){
		document.getElementById(idElement).appendChild(this.display);
	},

	/**
     * Method: activateTemperature
     *  Activa/desactiva el medidor de temperatura (muestra la aguja)
     * Parameters:
     * 	[state] - {Boolean}
     */
	activateTemperature: function(state) {
		if ((state!=null)&&(state==false)){
			if (this.activeTemp){
				this.activeTemp = false;
				this.agujaTemp.style.background = "";
				this.temperature = 0;
			}
		}
		else{
			if (!this.activeTemp){
				this.activeTemp = true;
				this.agujaTemp.style.background = "transparent url("+this.imagesURL+"agujaTemperatura.gif) no-repeat";
			}
		}
	},

	/**
     * Method: setTemperature
     *  Setea una temperatura, si el valor del parametro es 'null' desactiva el medidor de temperatura.
     * Parameters:
     * 	value - {Integer}
     */
	setTemperature: function(value) {
		//activate/desctivate----------------------
		if ((value==null)||(isNaN(value)))
			this.activateTemperature(false);
		else
			this.activateTemperature(true);
		if (!this.activeTemp) return;
		//------------------------------------------
		value = parseInt(value);
		if (value > this.tempMaxima)
			value = this.tempMaxima;
		else
			if (value < 0)
				value = 0;
		var agujaFrames = Math.floor(parseInt(this.agujaTempWidth)/parseInt(this.width))-1;
		var val=0;
		if (agujaFrames>1){
			var interval = this.tempMaxima/agujaFrames;
			var val = Math.round(value/interval);
		}
		var offsetX = (-1) * val * parseInt(this.width);
		var backgroundPosition = offsetX+'px 0px';
		this.agujaTemp.style.backgroundPosition = backgroundPosition;
		this.temperature = value;
		this.generateTooltip();
	},

	/**
     * Method: moveToTemperature
     *
     * Parameters:
     * 	toValue - {Integer}
     */
	moveToTemperature: function(toValue) {
		//activate/desctivate----------------------
		if ((toValue==null)||(isNaN(toValue)))
			this.activateTemperature(false);
		else
			this.activateTemperature(true);
		if (!this.activeTemp){
			this.generateTooltip();
			return;
		}
		//------------------------------------------
		if(this.animationTempTimeOut!=null)
			clearTimeout(this.animationTempTimeOut);
		toValue = parseInt(toValue);
		if (toValue > this.tempMaxima)
			toValue = this.tempMaxima;
		else
			if (toValue < 0)
				toValue = 0;
		var fromValue = this.temperature;
		var inc = true;
		if (fromValue>toValue)
			inc = false;
		var value = fromValue;
		var me = this;
		var f=function animated(){
			(inc)?value++:value--;
			me.setTemperature(value);
			if (value!=toValue){
				me.animationTempTimeOut=setTimeout(f,10);
			}
		}
		if (toValue!=value)
			this.animationTempTimeOut=setTimeout(f,10);
	},

	/**
     * Method: activateReserva
     *  Enciende/apaga el led indicador de la reserva
     * Parameters:
     * 	[state] - {Boolean}
     */
	activateReserva: function(state) {
		if ((state!=null)&&(state==false)){
			this.fuelReserva.style.background = "";
		}
		else{
			this.fuelReserva.style.background = "transparent url("+this.imagesURL+"fuelReserva.gif) no-repeat";
		}
	},

	/**
     * Method: activateFuel
     *  Activa/desactiva el medidor de combustible (muestra la aguja)
     * Parameters:
     * 	[state] - {Boolean}
     */
	activateFuel: function(state) {
		if ((state!=null)&&(state==false)){
			if (this.activeFuel){
				this.activeFuel = false;
				this.agujaFuel.style.background = "";
				this.fuel=0;
				this.activateReserva(false);
			}
		}
		else{
			if (!this.activeFuel){
				this.activeFuel = true;
				this.agujaFuel.style.background = "transparent url("+this.imagesURL+"agujaFuel.gif) no-repeat";
			}
		}
	},

	/**
     * Method: setFuel
     *
     * Parameters:
     * value - {Integer}
     */
	setFuel: function(value) {
		//activate/deactivate----------------------
		if ((value==null)||(isNaN(value)))
			this.activateFuel(false);
		else
			this.activateFuel(true);
		if (!this.activeFuel) return;
		//------------------------------------------
		value = parseInt(value);
		if (value > this.fuelMaxima)
			value = this.fuelMaxima;
		else
			if (value < 0){
				value = 0;
			}
				//reserva----------------------
		if ((value==0)&&(this.fuel>0))
			this.activateReserva(true);
		else {
			if ((this.fuel==0)&&(value>0))
				this.activateReserva(false);
		}
		//-----------------------------
		var agujaFrames = Math.floor(parseInt(this.agujaFuelWidth)/parseInt(this.width))-1;
		var val=0;
		if (agujaFrames>1){
			var interval = this.fuelMaxima/agujaFrames;
			var val = Math.round(value/interval);
		}
		var offsetX = (-1) * val * parseInt(this.width);
		var backgroundPosition = offsetX+'px 0px';
		this.agujaFuel.style.backgroundPosition = backgroundPosition;
		this.fuel = value;
		this.generateTooltip();
	},

	/**
     * Method: moveToFuel
     *
     * Parameters:
     * 	toValue - {Integer}
     */
	moveToFuel: function(toValue) {
		//activate/deactivate----------------------
		if ((toValue==null)||(isNaN(toValue)))
			this.activateFuel(false);
		else
			this.activateFuel(true);
		if (!this.activeFuel) {
			this.generateTooltip();
			return;
		}
		//------------------------------------------
		if(this.animationFuelTimeOut!=null)
			clearTimeout(this.animationFuelTimeOut);
		toValue = parseInt(toValue);
		if (toValue > this.fuelMaxima)
			toValue = this.fuelMaxima;
		else
			if (toValue < 0)
				toValue = 0;
		var fromValue = this.fuel;
		var inc = true;
		if (fromValue>toValue)
			inc = false;
		var value = fromValue;
		var me = this;
		//reserva----------------------
		if ((toValue==0)&&(this.fuel>0))
			this.activateReserva(true);
		else {
			if ((this.fuel==0)&&(toValue>0))
				this.activateReserva(false);
		}
		//-----------------------------
		var f=function animated(){
			(inc)?value++:value--;
			me.setFuel(value);
			if (value!=toValue){
				me.animationFuelTimeOut=setTimeout(f,10);
			}
		}
		if (toValue!=value)
			this.animationFuelTimeOut=setTimeout(f,10);
	},

	/**
     * Method: generateTooltip
	 *   Formatea e inserta el tooltip (title) al componente actual
     * Parameters:
     * 	toValue - {Integer}
     */
	generateTooltip: function(){
		var texto = 'TEMPERATURA: \n ';
		if (this.activeTemp)
			texto += this.temperature + ' C.'
		else texto += 'desactivado';
		texto += ' \n ';
		texto += 'NIVEL DE TANQUE: ';
		if (this.activeFuel)
			texto += this.fuel + ' %.'
		else texto += 'desactivado';
		this.display.title = texto;
	}


});